<template>
  <el-card>
    <!-- 上列表格信息 -->
    <form-info-list ref="formInfo" :info.sync="tableData" />
    <!-- 上列表格信息 -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="字段信息" name="cloum">
        <el-table ref="dragTable" :data="tableData.columnVOList" row-key="columnId" :max-height="tableHeight">
          <el-table-column
            label="字段列名"
            prop="columnName"
            fixed
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="数据类型"
            prop="columnType"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="字段描述" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnDes" />
            </template>
          </el-table-column>
          <el-table-column label="主键" min-width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isPrincipal" label="1" @change="onPrChange(scope,$event)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="列表" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isList" true-label="1"  />
            </template>
          </el-table-column>
          <el-table-column label="新增" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isAdd" true-label="1"  />
            </template>
          </el-table-column>
          <el-table-column label="编辑" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isEdit" true-label="1"  />
            </template>
          </el-table-column>
          <!-- <el-table-column label="导出" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isExport" true-label="1" />
            </template>
          </el-table-column> -->
          <el-table-column label="必填" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRequired" true-label="1" />
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isSelect" true-label="1" />
            </template>
          </el-table-column>

          <el-table-column label="查询方式" min-width="100">
            <template slot-scope="scope">
              <el-select v-model="scope.row.selectType" clearable>
                <el-option v-for="(item, index) in selectType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnInputType" clearable>
                <el-option v-for="(item, index) in columnInputType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="占用行" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.spaceRow">
                <el-option v-for="(item, index) in spaceRow" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="验证类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnValidateType" clearable>
                <el-option v-for="(item, index) in columnValidateType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典数据来源" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.dictDataType">
                <el-option v-for="(item, index) in dictDataType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典编码" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dictCode" />
            </template>
          </el-table-column>
          <el-table-column label="增强编码" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.strongCode" clearable>
                <el-option v-for="(item, index) in strongCode" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="排序类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.orderType" clearable>
                <el-option v-for="(item, index) in orderType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>

        </el-table>

      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" :loading="submitLoading" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import formInfoList from './formInfoList'
import Sortable from 'sortablejs'
// import { jsonPage, submitData, initSelect } from '../../online/designPage'
import { jsonPage, submitData, initSelect } from '@/views/formCreate/online/designPage'

// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
import { formCreate } from "@/api/index";
export default {
  name: 'GenEdit',
  components: {
    formInfoList
  },
  data() {
    return {
      // 提交加载
      submitLoading: false,
      pageColumn: {
        label: '',
        prop: '',
        fixed: true
      },
      idName: '',
      // 选中选项卡的 name
      activeName: 'cloum',
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + 'px',
      // 表列信息
      columnInputType: [],
      columnValidateType: [],
      orderType: [],
      selectType: [],
      validateType: [],
      strongCode: [],
      spaceRow: [],
      // 字典信息
      dictOptions: [],
      // 
      dictDataType:[
        {
          label: '字典',
          value: '0'
        },
        {
          label: '维度',
          value: '1'
        }
      ],
      // 菜单信息
      menus: [],
      // 表详细信息
      tableData: { databaseId: '',databaseName: '',
        columnVOList: [],
        buttonVOList: [], tableName: '', pageTitle: '', tableDes: '', remarks: '' }
    }
  },
  created() {
    this.initTable()
    this.codeStrongQueryForDicts()
    this.dictData('D000013', 'columnInputType')
    this.dictData('D000014', 'selectType')
    this.dictData('D000015', 'columnValidateType')
    this.dictData('D000017', 'spaceRow')
    this.dictData('D000018', 'orderType')
    // this.dictData('D000019', 'strongCode')
   
  },
  mounted() {

  },
  methods: {
    codeStrongQueryForDicts(){
      formCreate.codeStrongQueryForDict().then((res)=>{
       this.strongCode = res
        console.log(this.strongCode,'strongCode')
      })
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const selft = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const tData = selft.tableData.columnVOList
          const currRow = tData.splice(oldIndex, 1)[0]
          tData.splice(newIndex, 0, currRow)
          selft.tableData.columnVOList = []
          setTimeout(() => {
            selft.tableData.columnVOList = tData
          }, 5)
        }
      })
    },
    /** 提交按钮 */
    async submitForm() {
      jsonPage(this.tableData)
      let params = this.tableData
      this.submitLoading = true
      // this.listLoading = true
      params = submitData(params)
      // doPost('/online/tableInfo/allocation', params).then(res => {
      //   if (res.data.code === 200) {
      //     this.$message.success('配置成功')
      //     this.$router.push({ path: '/online/tableInfo/databaseManage', query: { t: Date.now() }})
      //     return false
      //   } else {
      //     this.listLoading = false
      //     this.$message.error(res.data.msg)
      //   }
      // }).catch((e) => {
      //   console.error(e)
      // }).finally(() => {
      //   this.submitLoading = false
      // })
      formCreate.tableInfoAllocation(params).then(res => {
        if (res.code === 200) {
          this.$message.success('配置成功')
          this.$router.push({ path: '/online/tableInfo/databaseManage', query: { t: Date.now() }})
          return false
        } else {
          // this.listLoading = false
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        console.error(e)
      }).finally(() => {
        this.submitLoading = false
      })
    },

    dictData(no, data) {
      const that = this
      // doGet('/api-sys/sys/dict/autoCache/' + no).then(res => {
      //   that[data] = res.data.data
      // })
        this.$getDict(no).then(res => {
        that[data] = res.datas
      })
    },
    initTable() {
      // this.listLoading = true
      const that = this
      const params = {}
      params.tableName = this.$route.query.tableName
      params.databaseId = this.$route.query.databaseId
      that.tableData.databaseId = that.$route.query.databaseId
      that.tableData.databaseName = that.$route.query.databaseName
      that.tableData.tableName = that.$route.query.tableName
      that.tableData.tableDes = that.$route.query.remarks
      that.tableData.pageTitle = that.$route.query.remarks
      that.tableData.remarks = that.$route.query.remarks
      // doGet('/dynamic/queryColumn', params).then(res => {
      //   that.tableData.columnVOList = res.data.data.columnDTOList
      //   that.tableData.tableName = res.data.data.tableName
      //   that.tableData.columnVOList.forEach(e => {
      //     e = initSelect(e)
      //   })
      //   this.listLoading = false
      //   that.rowDrop()
      // }).catch((e) => {
      //   console.error(e)
      // })
       formCreate.dynamicQueryColumn(params).then(res => {
        that.tableData.columnVOList = res.data.columnDTOList
        that.tableData.tableName = res.data.tableName
        that.tableData.columnVOList.forEach(e => {
          e = initSelect(e)
        })
        // this.listLoading = false
        that.rowDrop()
      }).catch((e) => {
        console.error(e)
      })
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res)
        })
      })
    },
    /** 关闭按钮 */
    close() {
      // this.$store.commit('DEL_TAG', this.$store.getters.tag)
      this.$router.push({ path: '/online/tableInfo/databaseManage', query: { t: Date.now() }})
    },

    // 主键选择变化触发
    onPrChange(scope, $event) {
      this.tableData.columnVOList.forEach((item, index) => {
        if (scope.$index !== index) {
          item.isPrincipal = '0'
        }
      })
    }
  }
}
</script>
